/* 引入的样式 */
@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

/* 头部公告 */
.top-notice{
    background-color: #141415;
    height: 30px;
    overflow: hidden;
    min-width: 1283px;
}
.top-notice .box{
    width: 1283px;
    margin:  0 auto;
}
.top-notice .top-ico-comm{
    margin: 6px 15px 0 5px;
    background:url(/imgs/ico-comm.png);
    width: 16px;
    height: 16px;
    background-position:0 -95px;
    float: left;
}
.top-notice ul{
    list-style: none;
    
}
.top-notice ul li{
    color: #a7a7a7;
    font-size: 14px;
    white-space: nowrap;
    line-height:30px;
}
.top-notice ul li a{
    color: #a7a7a7;
    text-decoration: none;
}


//main内容
.main{
    margin: 0 auto;
    min-height: 346px;
    // height: auto;
    min-width: 1283px;
    width: 100%;
    overflow: hidden;
    position: relative;
    &-banner{
        margin: 0 auto;
        min-height: 346px;
        height: auto;
        min-width: 1240px;
        width: 100%;
        overflow: hidden;
        clear: both;
        position: relative;
        background: #202020;
        padding: 0;
        position: relative;
        
        
        // & .swiper-wrapper {
        //     width: 600px;
        //     height: 300px;
        // }  

        & .my-bullet-active{
            
            
            background-color:  #ff6600;
            
            
            
        }
        & .swiper-pagination{
            width: 180px;
            position: absolute;
            left: 50%;
            bottom:60px;
            margin-left: -90px;
            
            
        }
        & .my-bullet{
            margin: 0 4px;
            float: left;
            width: 28px;
            height: 4px;
            cursor: pointer;
        
            

        }
        
        &-a1{
            margin: 0 auto;
            min-height: 346px;
            height: auto;
            min-width: 1283px;
            width: 100%;
            
        }
        &-a1 img{
            margin: 0 auto;
            min-height: 346px;
            height: auto;
            min-width: 1283px;
            width: 100%;
            vertical-align: bottom;
            font-size: 0;
            border: 0;
        }
    }
    &-center{
        background: #f5f5f5;
        width: 1283px;
        background-color: #fff;
        height: auto;
        margin:  0 auto;
        padding:40px;
        border-radius: 8px;
        margin-top: -30px;
        z-index: 3;
        position: relative;
        &-top{
            height: 100px;
            
            line-height: 100px;
            & h3{
                display: inline-block;
                font-weight: bold;
                color: #333;
                font-size: 28px;
            }
        }
        
        
        &-con{
            display: flex;
            justify-content: space-between;
            
            &-shoplists{
                padding-top: 20px;
                padding-bottom: 0;
                background-color: #fff;
                width: 1283px;
                margin: 0 auto;
                & ul{
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    
                    & li{
                        
                        margin-bottom: 20px;
                        width: 280px;
                        cursor: pointer;
                        height: 356px;
                        border: 1px solid #eee;
                        position: relative;
                        z-index: 1;
                        -webkit-transition: all .2s linear;
                        transition: all .2s linear;
                        
                        // 过渡属性
                        transition: all 0.4s;
                        &:hover{
                            box-shadow: 0px 8px 17px #d6d6d6;
				            margin-top: -5px;
                        }
                        & a{
                            color: #3a3f4a;
                            outline: none;
                            & img{
                                display: block;
                            }
                        }
                        & div{
                            margin-top: 18px;
                            text-align: center;
                            overflow: hidden;
                            position: relative;
                            padding: 5px;
                            & p{
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                line-height: 24px;
                            }
                            & .good-name{
                                font-size: 14px;
                                color: #444;
                            }
                            & .good-pri{
                                line-height: 25px;
                                font-size: 16px;
                                color: #f7545f;
                            }
                            & span{
                                position: absolute;
                                bottom: 6px;
                                right: 5px;
                                padding: 0;
                                border: 1px solid #fa585a;
                                width: 50px;
                                font-size: 12px;
                                line-height: 20px;
                                color: #fa585a;
                                text-align: center;
                                border-radius: 2px;
                                // box-shadow: inset 0 0 0 1px #fa585a;
                                // vertical-align: bottom;
                            }
                        }
                    }
                }
            }
        }
    }
}
